<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>挂件</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
</head>
<body ontouchstart="">

<div class="layui-fluid">

    <!-- 用户挂件 -->
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote mar-no">用户挂件</blockquote>
        </div>
        <div class="layui-col-md6">
            <div class="vip-panel">
                <div class="vip-panel-title bg-info"></div>
                <div class="vip-panel-body">
                    <div class="vip-panel-body-img-box">
                        <img src="../img/user-photos/1.png"/>
                        <p>昵称-XXX</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="vip-panel">
                <div class="vip-panel-title bg-pink"></div>
                <div class="vip-panel-body">
                    <div class="vip-panel-body-img-box">
                        <img src="../img/user-photos/2.png"/>
                        <p>昵称-XXX</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="vip-panel vip-box-shadow">
                <div class="vip-panel-title bg-danger"></div>
                <div class="vip-panel-body">
                    <div class="vip-panel-body-img-box">
                        <img src="../img/user-photos/3.png"/>
                        <p>昵称-XXX</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="vip-panel vip-box-shadow">
                <div class="vip-panel-title bg-mint"></div>
                <div class="vip-panel-body">
                    <div class="vip-panel-body-img-box">
                        <img src="../img/user-photos/4.png"/>
                        <p>昵称-XXX</p>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 数字挂件 -->
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote mar-no">数字挂件</blockquote>
        </div>
        <div class="layui-col-md6">
            <div class="vip-card">
                <a class="vip-card-content">
                    <div class="layui-elip bg-pink">标题-XXX</div>
                    <p class="layui-elip">0</p>
                </a>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="vip-card">
                <a class="vip-card-content">
                    <div class="layui-elip">标题-XXX</div>
                    <p class="layui-elip">0</p>
                </a>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="vip-card">
                <a class="vip-card-content">
                    <p class="layui-elip">0</p>
                    <div class="layui-elip">标题-XXX</div>
                </a>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="vip-card">
                <a class="vip-card-content">
                    <p class="layui-elip">0</p>
                    <div class="layui-elip bg-dark">标题-XXX</div>
                </a>
            </div>
        </div>

    </div>

    <!-- 数字挂件2 -->
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote mar-no">数字挂件2</blockquote>
        </div>
        <div class="layui-col-md3 layui-col-sm6">
            <div class="vip-chart bg-light">
                <div class="vip-chart-content">
                    <h5 class="layui-elip">标题-XXX</h5>
                    <h2 class="layui-elip">0</h2>
                </div>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-sm6">
            <div class="vip-chart bg-info">
                <div class="vip-chart-content">
                    <h5 class="layui-elip">标题-XXX</h5>
                    <h2 class="layui-elip">0</h2>
                </div>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-sm6">
            <div class="vip-chart bg-gray">
                <div class="vip-chart-content">
                    <h5 class="layui-elip">标题-XXX</h5>
                    <h2 class="layui-elip">0</h2>
                </div>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-sm6">
            <div class="vip-chart bg-pink">
                <div class="vip-chart-content">
                    <h5 class="layui-elip">标题-XXX</h5>
                    <h2 class="layui-elip">0</h2>
                </div>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-sm6">
            <div class="vip-chart bg-primary">
                <div class="vip-chart-content">
                    <h5 class="layui-elip">标题-XXX</h5>
                    <h2 class="layui-elip">0</h2>
                </div>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-sm6">
            <div class="vip-chart bg-success">
                <div class="vip-chart-content">
                    <h5 class="layui-elip">标题-XXX</h5>
                    <h2 class="layui-elip">0</h2>
                </div>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-sm6">
            <div class="vip-chart bg-mint">
                <div class="vip-chart-content">
                    <h5 class="layui-elip">标题-XXX</h5>
                    <h2 class="layui-elip">0</h2>
                </div>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-sm6">
            <div class="vip-chart bg-purple">
                <div class="vip-chart-content">
                    <h5 class="layui-elip">标题-XXX</h5>
                    <h2 class="layui-elip">0</h2>
                </div>
            </div>
        </div>

    </div>

    <!-- 图标挂件 -->
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote mar-no">图标挂件</blockquote>
        </div>
        <div class="layui-col-md4">
            <div class="vip-card vip-box-shadow">
                <a class="vip-card-content">
                    <div class="layui-elip bg-mint">饼图</div>
                    <i class="vip-icon">&#xe66c;</i>
                </a>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="vip-card vip-box-shadow">
                <a class="vip-card-content">
                    <div class="layui-elip">闪电</div>
                    <i class="vip-icon">&#xe6a6;</i>
                </a>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="vip-card vip-box-shadow">
                <a class="vip-card-content">
                    <i class="vip-icon">&#xe71c;</i>
                    <div class="layui-elip bg-light">药丸</div>
                </a>
            </div>
        </div>

    </div>

    <!-- 天气挂件 -->
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote mar-no">天气挂件</blockquote>
        </div>
        <div class="layui-col-md3">
            <div class="vip-card vip-box-shadow">
                <a class="vip-card-content">
                    <i class="vip-icon">&#xe6c3;</i>
                    <div class="layui-elip bg-light">大雨</div>
                </a>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="vip-card vip-box-shadow">
                <a class="vip-card-content">
                    <i class="vip-icon">&#xe6c4;</i>
                    <div class="layui-elip bg-light">晴天</div>
                </a>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="vip-card vip-box-shadow">
                <a class="vip-card-content">
                    <i class="vip-icon">&#xe6d0;</i>
                    <div class="layui-elip bg-light">阴天</div>
                </a>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="vip-card vip-box-shadow">
                <a class="vip-card-content">
                    <i class="vip-icon">&#xe6e5;</i>
                    <div class="layui-elip bg-light">多云</div>
                </a>
            </div>
        </div>

    </div>

    <!-- 版本挂件 -->
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote mar-no">版本挂件</blockquote>
        </div>
        <div class="layui-col-md3 layui-col-sm6">
            <div class="vip-version-panel vip-box-shadow text-center">
                <h2>专业版</h2>
                <span class="layui-badge-rim">永久授权</span>
                <ul>
                    <li>基于最新的。。。</li>
                    <li>面向全屏幕。。。</li>
                    <li>加入专属会。。。</li>
                    <li>版本的持续。。。</li>
                    <li>不限制域名。。。</li>
                </ul>
                <a href="#" class="layui-btn layui-btn-sm layui-btn-fluid">选择</a>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-sm6">
            <div class="vip-version-panel vip-box-shadow text-center">
                <h2>专业版</h2>
                <span class="layui-badge-rim">永久授权</span>
                <ul>
                    <li>基于最新的。。。</li>
                    <li>面向全屏幕。。。</li>
                    <li>加入专属会。。。</li>
                    <li>版本的持续。。。</li>
                    <li>不限制域名。。。</li>
                </ul>
                <a href="#" class="layui-btn layui-btn-sm layui-btn-fluid layui-bg-cyan">选择</a>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-sm6">
            <div class="vip-version-panel text-center">
                <h2>专业版</h2>
                <span class="layui-badge-rim">永久授权</span>
                <ul>
                    <li>基于最新的。。。</li>
                    <li>面向全屏幕。。。</li>
                    <li>加入专属会。。。</li>
                    <li>版本的持续。。。</li>
                    <li>不限制域名。。。</li>
                </ul>
                <a href="#" class="layui-btn layui-btn-sm layui-btn-fluid layui-bg-blue">选择</a>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-sm6">
            <div class="vip-version-panel text-center">
                <h2>专业版</h2>
                <span class="layui-badge-rim">永久授权</span>
                <ul>
                    <li>基于最新的。。。</li>
                    <li>面向全屏幕。。。</li>
                    <li>加入专属会。。。</li>
                    <li>版本的持续。。。</li>
                    <li>不限制域名。。。</li>
                </ul>
                <a href="#" class="layui-btn layui-btn-sm layui-btn-fluid layui-bg-red">选择</a>
            </div>
        </div>

    </div>

    <!-- 版本挂件2 -->
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote mar-no">版本挂件2</blockquote>
        </div>
    </div>

    <div class="vip-version-box">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6 layui-col-sm12">
                <div class="vip-version-panel text-center">
                    <h2>专业版</h2>
                    <span class="layui-badge-rim">永久授权</span>
                    <ul>
                        <li>基于最新的。。。</li>
                        <li>面向全屏幕。。。</li>
                        <li>加入专属会。。。</li>
                        <li>版本的持续。。。</li>
                        <li>不限制域名。。。</li>
                    </ul>
                    <a href="#" class="layui-btn layui-btn-sm layui-btn-fluid">选择</a>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-sm12">
                <div class="vip-version-panel text-center">
                    <h2>专业版</h2>
                    <span class="layui-badge-rim">永久授权</span>
                    <ul>
                        <li>基于最新的。。。</li>
                        <li>面向全屏幕。。。</li>
                        <li>加入专属会。。。</li>
                        <li>版本的持续。。。</li>
                        <li>不限制域名。。。</li>
                    </ul>
                    <a href="#" class="layui-btn layui-btn-sm layui-btn-fluid layui-bg-cyan">选择</a>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-sm12">
                <div class="vip-version-panel vip-box-shadow text-center">
                    <h2>专业版</h2>
                    <span class="layui-badge-rim">永久授权</span>
                    <ul>
                        <li>基于最新的。。。</li>
                        <li>面向全屏幕。。。</li>
                        <li>加入专属会。。。</li>
                        <li>版本的持续。。。</li>
                        <li>不限制域名。。。</li>
                    </ul>
                    <a href="#" class="layui-btn layui-btn-sm layui-btn-fluid layui-bg-blue">选择</a>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-sm12">
                <div class="vip-version-panel vip-box-shadow text-center">
                    <h2>专业版</h2>
                    <span class="layui-badge-rim">永久授权</span>
                    <ul>
                        <li>基于最新的。。。</li>
                        <li>面向全屏幕。。。</li>
                        <li>加入专属会。。。</li>
                        <li>版本的持续。。。</li>
                        <li>不限制域名。。。</li>
                    </ul>
                    <a href="#" class="layui-btn layui-btn-sm layui-btn-fluid layui-bg-red">选择</a>
                </div>
            </div>

        </div>
    </div>



</div>


</body>
</html>